<route lang="json5" type="page">
  {
    layout: 'tabbar',
    style: {
      navigationBarTitleText: '个人中心',
    },
  }
</route>

<script setup lang="ts">
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

function handleLogout() {
  userStore.logout()
}

function handleLogin() {
  uni.navigateTo({
    url: '/pages/login/index',
  })
}
</script>

<template>
  <view class="min-h-screen bg-gray-100">
    <view class="p-4">
      <!-- Account Management Section -->
      <view v-if="userStore.token" class="mb-4">
        <wd-cell-group border>
          <wd-cell title="账号管理" value="详细信息" is-link size="large" />
          <wd-cell title="手机号" value="153*****38" is-link size="large" />
        </wd-cell-group>
      </view>

      <!-- Settings Section -->
      <wd-cell-group border>
        <wd-cell v-if="userStore.token" title="自动扣款设置" is-link to="/pages/common/profile/deduction/index" size="large" />
        <wd-cell v-if="userStore.token" title="密码设置" is-link size="large" />
        <wd-cell title="隐私" is-link size="large" />
        <wd-cell title="通用" is-link size="large" />
        <wd-cell title="关于" is-link size="large" />
      </wd-cell-group>

      <!-- Logout Button -->
      <view v-if="userStore.token" class="mt-8">
        <wd-button type="primary" plain block size="large" @click="handleLogout">
          退出登录
        </wd-button>
      </view>
      <view v-else class="mt-8">
        <wd-button type="primary" plain block size="large" @click="handleLogin">
          立即登录
        </wd-button>
      </view>
    </view>
  </view>
</template>
